<template>
  <div class="page">
    <div class="chat">
      <div class="chat-group" v-for="group in data" :key="item" :style="{ '--columns': group.length }">
        <div class="chat-item" v-for="item in group" :key="item">
          <div class="title">{{ item.title }}</div>
          <div class="content">
            <app-echarts :options="item.options" v-if="item.type == 'chat'" />
            {{ item.content }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
const data = ref(window.data)
</script>
<style lang="scss" scoped>
.page {
  height: 100vh;
  background-color: #f2f3f5;
}
.chat {
  // grid-template-columns: repeat(4, 1fr);
  padding: 16px;
}

.chat-group {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.chat-item {
  padding: 16px;
  border: 1px solid #e5e6eb;
  border-radius: 4px;
  background-color: #fff;
  .title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 16px;
  }

  .content {
    height: 300px;
  }
}
</style>
